<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .red {
      color: red;
    }
    .green {
      color: green;
    }
  </style>
</head>
<body>
  <div id="app">
    <p>vue中的指令</p>
    <p>写在标签属性的位置上，目的是为了操作dom，将自己表达式的值应用在dom上</p>
    <p>1. v-text:用来显示文本</p>
    <p v-text="msg"></p>
    <p v-text="msgArr[1]"></p>
    <p>2. v-html:用来显示带有标签格式的文本</p>
    <p v-html="msgHtml"></p>
    <p>3. v-bind:用来绑定标签属性，使他成的属性值为变量</p>
    <p v-bind:class="class1">你好，vue</p>
    <input v-bind:type="type1" v-bind:qwer="df">
    <button v-bind:disabled="disabled">提交</button>
    <p>4. v-if：用来控制节点的显示隐藏。表达式的值为真时，显示节点；否则隐藏节点</p>
    <p v-if="isLogin">欢迎你，Jack</p>
    <button v-else>请登录</button>
    <hr>
    <p v-if="num1 < 0">数字小于零</p>
    <p v-else-if="num1 === 0">数字等于零</p>
    <p v-else="num1 > 0">数字大于零</p>
    <p>5. v-show：用来控制节点的显示隐藏。表达式的值为真时，显示节点；否则隐藏节点</p>
    <p v-show="isLogin">欢迎你，Jack</p>
    <button v-show="!isLogin" v-on:click="isLogin = !isLogin">请登录</button>
    <p>v-if和v-show的区别：v-if只有当值为真时才会渲染节点，否则就删除或者跳过节点；v-show是当值为真时显示，值为假时通过css隐藏。v-if适用于不经常切换的场景，初始化加载快，切换时加载慢；v-show适用于频繁切换的场景，初始化加载慢，切换时加载快。</p>
    <p>6. v-for：循环显示一些节点</p>
    <p>6.1 循环一个数组</p>
    <ul>
      <li v-for="(goods,index) in goodsList" v-bind:key="index">名称：{{goods.name}}，价格：￥{{goods.price}}元</li>
    </ul> 
    <p>我的爱好</p>
    <button v-for="(hobby,index) in hobbyList" v-bind:key="index">{{index + 1}}. {{hobby}}</button>
    <p>6.2 循环一个对象</p>
    <p v-for="(val, key, index) in person">{{index + 1}}. {{key}}: {{val}}</p>
    <p>6.3 循环一个整数</p>
    <button v-for="num in time" v-on:click="pageClick(num)">第{{num}}页</button>
    <p>7. v-once:单次渲染</p>
    <p v-once>{{msg}}</p>
    <p>8. v-model:用来管理表单控件的值，可以设置或者获取控件的值。</p>
    <textarea v-model="msg"></textarea>
    <span>请选择性别：</span>
    <input type="radio" v-model="isSelece" value="男"><label>男</label>
    <input type="radio" v-model="isSelece" value="女"><label>女</label>
    <p>9. v-on：添加事件监听</p>
    <button v-on:click="clickHandler">点击</button>
    <hr>
    <p>九九乘法表</p>
    <p v-for="y in 9">
      <span v-for="x in y">{{x}}*{{y}}={{y*x}}</span>
    </p>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'hello vue',
        person: {
          name: 'Tom',
          age: 18,
          job: 'student',
          sex: 'nan'
        },
        time: 6,
        msgArr: ['hello vue', 'hello hunan'],
        msgHtml: `<mark style="color:red">hello vue</mark>`,
        class1: 'green',
        type1: 'text',
        df: '666',
        disabled: true,
        isLogin: false,
        num1: 8,
        goodsList: [
          {name: 'iphone', price: 7999},
          {name: 'huawei', price: 6999},
          {name: 'xiaomi', price: 5999},
        ],
        hobbyList: [
          '唱','跳','rap','打篮球'
        ],
        isSelece: '女'
      },
      methods: {
        clickHandler() {
          this.msg = 'hi vue'
        },
        pageClick(num) {
          console.log(num);
        }
      },
    })
  </script>
</body>
</html>